import { useEffect, useRef, useState } from "react";
import Qipan from "../Qipan";

import './Game.css'
import {Black,White} from '../Unit'

export default function (props) {
  let [status, setStatus] = useState(true);
  let [start, setStart] = useState(true);
  let handleClick = () => {
    status ? setStatus(false) : setStatus(true);
    return status;
  };
  let handleEnd = (status) => {
    setStatus(status);
    setStart(false);
  };
  let reStart=()=>{
    setStart(true)
    setStatus(true)
  }
  let back=()=>{
    setStart(true)
    if(start){
      handleClick()
    }
  }
  return (
    <div className="Game">
      {start ? (
        <div className="title"><span>当前落子：</span>{status ? <div className="title">黑 &nbsp;<Black/></div> : <div className="title">白 &nbsp; <White/></div>}</div>
      ) : (
        <div className="title">胜利者：{status ? <div className="title">黑 &nbsp;<Black/></div> : <div className="title">白 &nbsp; <White/></div>}</div>
      )}
      <Qipan click={handleClick} end={handleEnd} start={start} reStrat={reStart} back={back}  ></Qipan>
    </div>
  );
}
